<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人信息</title>
	<link rel="stylesheet" href="${basePath}/front/css/user.css">
	<link rel="icon" href="${basePath}/front/images/Tomorrow03.png" sizes="32x32">
</head>
<body>
<!-- 顶部导航栏开始 -->
<div class="header">
	<div class="inner">
		<div class="logo">
			<!-- 点击后回到首页 -->
			<a href="/frontIndex" id="boke"><img src="${basePath}/front/images/Tomorrow01.png" alt=""></a>
		</div>
		<div class="nav">
			<ul>
				<ul>
					<li><a href="/article/front/toEditArticle"><i></i>发布文章</a></li>
					<li><a href="/user/userCenter/${sessionScope.user.userId}"><i></i>${userCenterVO.userName}</a></li>
				</ul>
			</ul>
		</div>
	</div>
</div>
<!-- 顶部导航栏结束 -->
<!-- 个人信息界面开始 -->
<div class="user">
	<div class="userNav" id="userNav">
		<div class="function1">个人资料</div>
		<div>我的收藏</div>
		<div>我的留言</div>
		<div>我的文章</div>
	</div>
	<div class="userMassage" id="userMassage">
		<div class="result1">
			<h1>个人资料</h1>

			<div class="personalMessage">
				<div class="img">
					<input type="file" class="hide" id="hide" name="filename" onchange="uploadUserFile()">
					<img src="${basePath}/${userCenterVO.userAvatar}" width="150px" height="150px" id="img">
					<%--<label>更换头像惹</label>--%>
				</div>
				<h2 class="name">${userCenterVO.userName}</h2>
				<h6>${userCenterVO.userEmail}</h6>
				<div class="personalBlogMassage">
						<span class="tNumber">
							<h3>文章数</h3>
							<p>${userCenterVO.articleNum}</p>
						</span>
					<span class="sNumber">
							<h3>收藏</h3>
							<p>${userCenterVO.collectNum}</p>
						</span>
					<span class="vNumber">
							<h3>浏览文章</h3>
							<p>1520</p>
						</span>
				</div>
			</div>
			<div class="personalData">
				<form action="${basePath}/user/front/updateUser" id="updateUserForm" method="post">
					<input type="hidden" name="userAvatar" id="fileInput"/>
					<input type="hidden" name="userId" value="${sessionScope.user.userId}"/>
					<span>
							<h3>称&nbsp;&nbsp;&nbsp;昵：</h3>
							<input type="text" name="userName" value="${userCenterVO.userName}" readonly="readonly" id="change1"></input>
						</span>
					<span>
							<h3>性&nbsp;&nbsp;&nbsp;别：</h3>
							<input type="text" name="userSex" value="${userCenterVO.userSex}" readonly="readonly" id="change2"></input>
						</span>
					<span>
							<h3>注册时间：</h3>
							<fmt:formatDate value="${userCenterVO.userCreateTime}" pattern="yyyy年MM月dd日"/>
						<input type="hidden" value="${userCenterVO.userCreateTime}" readonly="readonly" id="change3"></input>
						</span>
					<span>
							<h3>手机号：</h3>
							<input type="text" name="userPhone" value="${userCenterVO.userPhone}" readonly="readonly" id="change4"></input>
						</span>
					<span>
							<h3>状&nbsp;&nbsp;&nbsp;态：</h3>
							<c:if test="${userCenterVO.userStatus == 0}">
								<input type="text" value="正常" readonly="readonly" id="change5"></input>
							</c:if>
							<c:if test="${userCenterVO.userStatus == 1}">
								<input type="text" value="冻结" readonly="readonly" id="change5"></input>
							</c:if>
						</span>
					<input type="button" value="确定" class="changeA" id="changeA" onclick="updateUserForm()">
					<a href="#" id="changeB">修改信息<i></i></a>
					<a href="#" class="cancel" id="cancel">取消</a>
				</form>
			</div>
		</div>
		<div class="result2">
			<h1>我的收藏</h1>
			<div class="myCollect">
				<ul>
					<li>
						<a href="#" id="delete"><i></i></a>
						<a href="#"><h2>THE 1975</h2></a>
						<p>The 1975 are an English pop rock band originally formed in 2002 in Wilmslow, Cheshire.Now based in Manchester,the band consists of lead vocalist and rhythm guitarist Matthew Healy,lead guitarist Adam Hann, bassist Ross MacDonald, and drummer George Daniel.</p>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="result3">
			<h1>我的留言</h1>
			<div class="myMessage">
				<ul>
					<table>
						<c:forEach items="${userCenterVO.messageVOS}" var="messageVO">
							<tr>
								<td>
									<h2>from ${messageVO.readerName}</h2>
									<p>${messageVO.messageContent}</p>
									<input type="text" class="inputT">
									<input type="button" class="inputB" value="回复">
								</td>

							</tr>
						</c:forEach>
					</table>
				</ul>
			</div>
		</div>
		<div class="result4">
			<h1>我的文章</h1>
			<div class="myArticle">
				<ul>
					<c:forEach items="${userCenterVO.articles}" var="article">
						<li>
							<a href="" onclick="deleteArticle(${article.articleId});return false"><i class="delete"></i></a>
							<a href="#"><h2>${article.articleTitle}</h2></a>
							<p>${article.articleContent}</li>
					</c:forEach>
				</ul>
				<a href="editorArtical.html"><i></i></a>
			</div>
		</div>
	</div>

</div>
<!-- 个人信息界面结束 -->
<script src="${basePath}/front/js/user.js"></script>
<script src="${basePath}/front/js/jquery-1.9.1.min.js"></script>
<script src="${basePath}/front/js/ajaxfileupload.js"></script>


<script type="text/javascript">
    function deleteArticle(articleId){
        $.ajax({
            type:'get',
            url:'${basePath}/article/front/deleteArticle/' + articleId,
//                data:{"workDataId":workDataId},
//            dataType:"json",
            global:false,
            success:function(data){
                if (data.success) {
                    alert(data.msg)
                    window.location.href = '${basePath}/user/userCenter/${sessionScope.user.userId}'
                }else{
                    alert(data.msg)
                }
            }
        });
    }


    function uploadUserFile(){
        var type = "file";          //后台接收时需要的参数名称，自定义即可
        var id = "hide";            //即input的id，用来寻找值
        var formData = new FormData();
        <%--var baseUrl = ${basePath}--%>
        formData.append(type, $("#"+id)[0].files[0]);    //生成一对表单属性
        $.ajax({
            type: "POST",           //因为是传输文件，所以必须是post
            url: '${basePath}/user/front/uploadFile',         //对应的后台处理类的地址
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                alert(data.msg);
                $("#img").attr("src", '/'+data.msg);
                $("#fileInput").val(data.msg);
//                console.log(data.msg)
            }
        });
    }


    function updateUserForm() {

        var postData = $("#updateUserForm").serialize();
        $.ajax({
            type: "POST",
            url: "${basePath}/user/front/updateUser",
            data: postData,
            success: function(data) {
//                alert(data)
//				console.log(data)
                if (data.success) {
                    alert(data.msg);
                    window.location.href = '${basePath}/user/userCenter/${sessionScope.user.userId}';
                } else {
                    alert(data.msg);
                }
            }
        });
    }



</script>
</body>
</html>